<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px" style="width: 900px; text-align: center; margin: 50px auto;">
        <tr>
            <th><input type="checkbox" id="checkAll"> 全选</th>
            <th>商品编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>上货日期</th>
            <th>是否下架</th>
            <th>操作</th>
        </tr>

        <tr>
            <td><input type="checkbox" class="item" value="1"> </td>
            <td>201300001</td>
            <td>Acer 星锐 4752G</td>
            <td>650</td>
            <td>2018-01-07</td>
            <td><input type="checkbox"></td>
            <td><span class="btnRem">删除</span><span class="btnUpt" style="margin: 0 10px;">修改</span><span>详情</span></td>
        </tr>

        <tr>
            <td><input type="checkbox" class="item" value="2"> </td>
            <td>201300001</td>
            <td>ZTE U880</td>
            <td>650</td>
            <td>2019-09-02</td>
            <td><input type="checkbox"></td>
            <td><span class="btnRem">删除</span><span class="btnUpt" style="margin: 0 10px;">修改</span><span>详情</span></td>
        </tr>

        <tr>
            <td><input type="checkbox" class="item" value="3" checked = "true"></td>
            <td>201300001</td>
            <td>Lenovo A820T</td>
            <td>650</td>
            <td>2021-12-07</td>
            <td><input type="checkbox"></td>
            <td><span class="btnRem">删除</span><span class="btnUpt" style="margin: 0 10px;">修改</span><span>详情</span></td>
        </tr>
    </table>
    <fieldset style="width: 300px; margin: 0 auto;">
        <legend style="background-color: black; color: aliceblue;">商品添加</legend>
        商品编号:<input type="text"><br>
        商品名称:<input type="text"><br>
        商品价格:<input type="text"><br>
        上货时间:
                <select>
                    <option>2018</option>
                    <option>2019</option>
                    <option>2021</option>
                </select>
                <select>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>09</option>
                    <option>12</option>
                </select>
                <select>
                    <option>07</option>
                    <option>02</option>
                    <option>16</option>
                    <option>18</option>
                    <option>20</option>
                </select><br>
        是否下架:<input type="radio" name="YN"   value="是">是<input type="radio" value="否" name="YN">否<br>
        <input type="submit" id="btnAdd" value="添加"><input type="submit" value="批量删除" >
    </fieldset>
</body>
<script src="js/work.js"></script>
<script src="js/jquery-3.7.1.js"></script>
<script>
    $("#btnAdd").click(function(){
        var input = $("input[type='text']");
        var fa = [];
        //获取前三个input的内容
        for(var i = 0;i<input.length;i++){
            fa.push($(input[i]).val()) ;
        }
        //时间
        var sel = $("select");
        for(var i = 0;i<sel.length;i++){
            fa.push($(sel[i]).val());
        }
        //获取是否上架
        var rad = $("input[type = 'radio'");
        var radVal = rad.filter(":checked").val();
        // console.log(radVal);
        var check = radVal === '是' ? "<input type = 'checkbox' checked = 'true'>":"<input type = 'checkbox'>";
        
        //添加节点
        var newRow =
        $("<tr></tr>")
        .append($("<td><input type='checkbox' class='item'></td>"))
        .append($("<td></td>").text(fa[0]))
        .append($("<td></td>").text(fa[1]))
        .append($("<td></td>").text(fa[2]))
        .append($("<td></td>").text(fa[3]+'-'+fa[4]+'-'+fa[5]))
        .append($("<td>"+check+"</td>"))
        .append($("<td><span class = 'btnRem'>删除</span><span style='margin: 0 10px;'>修改</span><span>详情</span></td>"))
        $("table").append(newRow);
    })
    //删除
    $(".btnRem").click(function(){
        var remTr = $(this).closest("tr");
        remTr.remove();    
    })
    //修改
    $(".btnUpt").click(function(){
        var uptTr = $(this).closest("tr");
        var bianhao = uptTr.children().eq(1).text();
        var mingcheng = uptTr.children().eq(2).text();
        var jiage = uptTr.children().eq(3).text();
        var Year = uptTr.children().eq(4).text().slice(0,4);
        var month = uptTr.children().eq(4).text().slice(5,7);
        var day = uptTr.children().eq(4).text().slice(8,10);
        var isChecked = uptTr.children().eq(5).find("input[type='checkbox']").is(':checked');
        console.log(isChecked)
       //赋值 
       $("input[type='text']").eq(0).val(bianhao);
       $("input[type='text']").eq(1).val(mingcheng);
       $("input[type='text']").eq(2).val(jiage);
       $("select").eq(0).val(Year);
       $("select:eq(1)").val(month);
       $("select:eq(2)").val(day);
       if(isChecked == true){
        $("input[type='radio']").eq(0).prop('checked',true);
       }else{
        $("input[type='radio']").eq(1).prop('checked',true);
       }
       
    })
</script>
</html>